import { memo, useEffect, useRef } from 'react'
import './index.scss'
import kbAvatar from '../../../static/imgs/kbAvatar.png'

interface propsT{
    avatarUrl:string;
    name:string;
    volume?: number; // 添加音量属性（0-100）
    isCurrentUser?: boolean; // 是否是当前用户
}

const UserCard = memo(({ avatarUrl, name, volume = 0, isCurrentUser = false }: propsT) => {
    const waveRef = useRef<HTMLDivElement>(null);
    
    // 根据音量调整波动效果
    useEffect(() => {
        const wave = waveRef.current;
        if (!wave) return;
        
        // 设置波动的尺寸（基于音量）
        const size = 6 + (volume / 100 * 14); // 波动大小在6-20之间
        wave.style.setProperty('--wave-size', `${size}px`);
        
        // 设置波动的颜色强度（基于音量）
        const intensity = 0.4 + (volume / 100 * 0.6); // 透明度在0.4-1之间
        wave.style.setProperty('--wave-intensity', `${intensity}`);
        
        // 如果音量大于0，添加波动动画
        if (volume > 5) {
            wave.style.display = 'block';
        } else {
            wave.style.display = 'none';
        }
        
    }, [volume]);

    return (
        <div className="userCard_box">
            <div className="userCard_avatar">
                <img loading='lazy' src={avatarUrl||kbAvatar} alt="用户头像" />
                {/* 音量波动层 */}
                <div 
                    ref={waveRef} 
                    className={`userCard_wave ${isCurrentUser ? 'current' : ''}`}
                />
            </div>
            <div className="userCard_name">{name}</div>
            {/* 在名字下方添加音量指示条 */}
            <div className="userCard_volume">
                <div 
                    className="userCard_volume_level" 
                    style={{ width: `${volume}%` }}
                />
            </div>
        </div>
    )
})

export default UserCard